<template>
  <!-- 管理员布局 -->
  <el-container v-if="isAdmin" class="admin-layout">
    <!-- 左侧边栏 -->
    <ManageSider />

    <!-- 右侧内容区 -->
    <el-container direction="vertical">
      <!-- 顶部导航栏 -->
      <ManageHeader />

      <!-- 主内容区 -->
      <el-main class="admin-main-content">
        <div class="admin-container">
          <div class="action-bar">
            <div class="search-actions">
              <el-input
                  v-model="searchName"
                  placeholder="请输入餐厅名称"
                  style="width: 300px; margin-right: 10px;"
                  clearable
              />
              <el-button type="primary" @click="searchCanteens">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </div>
            <el-button
                type="primary"
                @click="openAddCanteenDialog"
            >
              添加店铺
            </el-button>
          </div>

          <el-table :data="paginatedCanteens" style="width: 100%">
            <el-table-column prop="id" label="餐厅ID" width="100"></el-table-column>
            <el-table-column prop="name" label="餐厅名称" width="200"></el-table-column>
            <el-table-column prop="position" label="餐厅位置" width="200"></el-table-column>
            <el-table-column label="操作" width="500">
              <template #default="scope">
                <el-button
                    type="text"
                    @click="openEditCanteenDialog(scope.row)"
                >
                  修改
                </el-button>
                <el-button
                    type="text"
                    @click="deleteCanteen(scope.row.id)"
                    style="color: #f56c6c"
                >
                  删除
                </el-button>
                <el-button
                    type="text"
                    @click="showTables(scope.row.id, scope.row.name)"
                >
                  座位
                </el-button>
                <el-button
                    type="text"
                    @click="showDishes(scope.row.id, scope.row.name)"
                >
                  菜品
                </el-button>
                <el-button
                    type="text"
                    @click="showReviews(scope.row.id, scope.row.name)"
                >
                  评价
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
              background
              layout="prev, pager, next"
              :total="canteens.length"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
              style="margin-top: 20px;"
          />
        </div>
      </el-main>
    </el-container>
  </el-container>

  <!-- 普通用户布局 -->
  <div v-else>
    <NormalHeader />
    <div class="permission-denied">
      <h1>管理员功能暂时不对您开放</h1>
    </div>
  </div>

  <!-- 修改餐厅信息的模态框 -->
  <el-dialog v-model="editCanteenDialogVisible" title="修改餐厅信息" width="30%">
    <el-form :model="selectedCanteen" label-width="100px">
      <el-form-item label="餐厅名称">
        <el-input v-model="selectedCanteen.name" placeholder="请输入餐厅名称" />
      </el-form-item>
      <el-form-item label="餐厅位置">
        <el-input v-model="selectedCanteen.position" placeholder="请输入餐厅位置" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editCanteenDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveCanteenInfo">确定</el-button>
    </template>
  </el-dialog>

  <!-- 添加店铺的模态框 -->
  <el-dialog v-model="addCanteenDialogVisible" title="添加店铺" width="30%">
    <el-form :model="newCanteen" label-width="100px">
      <el-form-item label="店铺名称">
        <el-input v-model="newCanteen.name" placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item label="餐厅位置">
        <el-input v-model="newCanteen.position" placeholder="请输入餐厅位置" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addCanteenDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addCanteen">确定</el-button>
    </template>
  </el-dialog>

  <!-- 座位信息弹框 -->
  <el-dialog v-model="tablesDialogVisible" :title="`${currentCanteenName} - 座位信息`" width="80%">
    <div class="tables-section">
      <div class="table-list">
        <div v-for="table in tables" :key="table.id" class="table-item">
          <div class="table-info">
            <span>{{ table.number }}号桌</span>
            <span>可坐{{ table.capacity }}人</span>
            <span>价格: {{ table.price }}元</span>
            <span v-if="table.status === 1" style="color: red;">已被预订</span>
            <span v-else style="color: green;">空闲</span>
          </div>
          <div>
            <el-button type="primary" @click="openEditTableModal(table)">编辑</el-button>
            <el-button type="danger" @click="deleteTable(table.id)">删除</el-button>
          </div>
        </div>
      </div>
      <el-button type="success" @click="openAddTableModal">添加餐桌</el-button>
    </div>
  </el-dialog>

  <!-- 添加餐桌弹框 -->
  <el-dialog v-model="addTableModalVisible" title="添加餐桌" width="30%">
    <el-form :model="addTableForm" label-width="80px">
      <el-form-item label="座位号">
        <el-input v-model="addTableForm.number" />
      </el-form-item>
      <el-form-item label="容量">
        <el-input v-model="addTableForm.capacity" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="addTableForm.price" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addTableModalVisible = false">取消</el-button>
      <el-button type="primary" @click="handleAddTable">确定</el-button>
    </template>
  </el-dialog>

  <!-- 编辑座位弹框 -->
  <el-dialog v-model="editTableModalVisible" title="编辑座位" width="30%">
    <el-form :model="editTableForm" label-width="80px">
      <el-form-item label="座位号">
        <el-input v-model="editTableForm.number" />
      </el-form-item>
      <el-form-item label="容量">
        <el-input v-model="editTableForm.capacity" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="editTableForm.price" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="editTableForm.status">
          <el-option label="空闲" :value="0" />
          <el-option label="已预订" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editTableModalVisible = false">取消</el-button>
      <el-button type="primary" @click="saveTableEdit">保存</el-button>
    </template>
  </el-dialog>

  <!-- 菜品信息弹框 -->
  <el-dialog v-model="dishesDialogVisible" :title="`${currentCanteenName} - 菜品信息`" width="80%">
    <div class="dishes-section">
      <div class="dish-list">
        <div v-for="dish in dishes" :key="dish.id" class="dish-item">
          <img :src="require(`../assets/uploads/${dish.image}`)"
               alt="菜品图片"
               style="width: 50%; height: auto; border-radius: 4px; margin-top: 10px;"
               class="dish-image"
          />
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <p>价格: {{ dish.price }}元</p>
            <p>类型: {{ dish.typeName }}</p>
          </div>
          <div class="dish-actions">
            <el-button type="primary" @click="openEditDishModal(dish)">编辑</el-button>
            <el-button type="danger" @click="openDeleteDishModal(dish.id)">删除</el-button>
          </div>
        </div>
      </div>
      <el-button type="success" @click="openAddDishModal">添加菜品</el-button>
    </div>
  </el-dialog>

  <!-- 添加菜品弹框 -->
  <el-dialog v-model="addDishModalVisible" title="添加菜品" width="40%">
    <el-form :model="addDishForm" label-width="80px">
      <el-form-item label="菜品名称">
        <el-input v-model="addDishForm.name" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="addDishForm.price" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="addDishForm.description" type="textarea" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="addDishForm.typeId" placeholder="请选择菜品类型">
          <el-option
              v-for="type in dishTypes"
              :key="type.id"
              :label="type.name"
              :value="type.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="图片">
        <input type="file" @change="handleAddDishImageUpload" accept="image/*" />
        <img v-if="addDishImagePreview" :src="addDishImagePreview" alt="预览图片" style="width: 100px; height: auto; margin-top: 10px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDishModalVisible = false">取消</el-button>
      <el-button type="primary" @click="handleAddDish">确定</el-button>
    </template>
  </el-dialog>

  <!-- 编辑菜品弹框 -->
  <el-dialog v-model="editDishModalVisible" title="编辑菜品" width="40%">
    <el-form :model="editDishForm" label-width="80px">
      <el-form-item label="菜品名称">
        <el-input v-model="editDishForm.name" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="editDishForm.price" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="editDishForm.description" type="textarea" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="editDishForm.typeId" placeholder="请选择菜品类型">
          <el-option
              v-for="type in dishTypes"
              :key="type.id"
              :label="type.name"
              :value="type.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="图片">
        <input type="file" @change="handleEditDishImageUpload" accept="image/*" />
        <img v-if="editDishImagePreview" :src="editDishImagePreview" alt="预览图片" style="width: 100px; height: auto; margin-top: 10px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDishModalVisible = false">取消</el-button>
      <el-button type="primary" @click="handleEditDish">确定</el-button>
    </template>
  </el-dialog>

  <!-- 删除菜品确认弹框 -->
  <el-dialog v-model="deleteDishModalVisible" title="确认删除" width="30%">
    <p>确定要删除该菜品吗？</p>
    <template #footer>
      <el-button @click="deleteDishModalVisible = false">取消</el-button>
      <el-button type="danger" @click="handleDeleteDish">确定</el-button>
    </template>
  </el-dialog>

  <!-- 评价信息弹框 -->
  <el-dialog v-model="reviewsDialogVisible" :title="`${currentCanteenName} - 评价信息`" width="80%">
    <div class="reviews-section">
      <div class="review-list">
        <div v-for="review in reviews" :key="review.id" class="review-item">
          <div class="review-header">
            <div class="user-info">
              <span class="username">{{ review.userName }}</span>
              <span class="review-time">{{ formatDate(review.date) }}</span>
            </div>
            <button
                @click="deleteReview(review.id)"
                class="delete-button"
            >
              删除
            </button>
          </div>
          <div class="review-content">
            <p>{{ review.content }}</p>
            <div class="review-images">
              <img
                  v-if="review.image"
                  :src="require(`../assets/uploads/${review.image}`)"
                  alt="评价图片"
                  style="width: 30%; height: auto; border-radius: 4px; margin-top: 10px;"
                  class="review-image"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getCanteenList,
  updateCanteen,
  deleteCanteen,
  addCanteen,
  GetCanteenTable,
  GetDishes,
  GetReview,
  AddSeat,
  UpdateSeat,
  DeleteSeat,
  AddDish,
  DeleteDish,
  UpdateDish,
  GetDishType,
  DeleteReview, getCanteenByName
} from "@/api";
import NormalHeader from "@/components/NormalHeader.vue";
import ManageSider from "@/components/ManageSider.vue";
import ManageHeader from "@/components/ManageHeader.vue";

export default {
  name: "ManageCanteen",
  components: {
    NormalHeader,
    ManageSider,
    ManageHeader
  },
  data() {
    return {
      searchName: '', // 搜索关键词
      isAdmin: false,
      canteens: [],
      pageSize: 8,
      currentPage: 1,
      editCanteenDialogVisible: false,
      selectedCanteen: { id: null, name: "", position: "" },
      addCanteenDialogVisible: false,
      newCanteen: { name: "", position: "" },

      // 座位相关
      tablesDialogVisible: false,
      currentCanteenId: null,
      currentCanteenName: "",
      tables: [],
      addTableModalVisible: false,
      addTableForm: {
        number: null,
        capacity: null,
        price: null
      },
      editTableModalVisible: false,
      editTableForm: {
        id: null,
        number: null,
        capacity: null,
        price: null,
        status: null
      },

      // 菜品相关
      dishesDialogVisible: false,
      dishes: [],
      dishTypes: [],
      addDishModalVisible: false,
      addDishForm: {
        name: '',
        price: null,
        description: '',
        typeId: null,
        image: ''
      },
      addDishImageFile: null,
      addDishImagePreview: '',
      editDishModalVisible: false,
      editDishForm: {
        id: null,
        name: '',
        price: null,
        description: '',
        typeId: '',
        image: ''
      },
      editDishImageFile: null,
      editDishImagePreview: '',
      deleteDishModalVisible: false,
      selectedDishId: null,

      // 评价相关
      reviewsDialogVisible: false,
      reviews: []
    };
  },
  computed: {
    paginatedCanteens() {
      if (!Array.isArray(this.canteens)) return [];
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.canteens.slice(start, end);
    }
  },
  async mounted() {
    await this.checkAdminPermission();
    if (this.isAdmin) {
      await this.fetchCanteenList();
      await this.fetchDishTypes();
    }
  },
  methods: {
    // 搜索方法
    async searchCanteens() {
      try {
        const { data } = await getCanteenByName(this.searchName);
        this.canteens = Array.isArray(data?.data?.canteens) ? data.data.canteens : [];
        this.currentPage = 1; // 重置到第一页
      } catch (error) {
        ElMessage.error("搜索餐厅失败");
        console.error(error);
      }
    },

    // 重置方法
    resetSearch() {
      this.searchName = '';
      this.fetchCanteenList();
    },
    async checkAdminPermission() {
      const userType = localStorage.getItem("type");
      this.isAdmin = userType === "0";
    },
    async fetchCanteenList() {
      try {
        const { data } = await getCanteenList();
        this.canteens = Array.isArray(data?.data?.canteens) ? data.data.canteens : [];
      } catch (error) {
        ElMessage.error("获取餐厅列表失败");
        console.error(error);
        this.canteens = [];
      }
    },
    openAddCanteenDialog() {
      this.newCanteen = { name: "", position: "" };
      this.addCanteenDialogVisible = true;
    },
    async addCanteen() {
      if (!this.newCanteen.name || !this.newCanteen.position) {
        ElMessage.warning("请填写店铺名称和位置");
        return;
      }

      try {
        await addCanteen(this.newCanteen.name, this.newCanteen.position);
        ElMessage.success("添加成功");
        this.addCanteenDialogVisible = false;
        await this.fetchCanteenList();
      } catch (error) {
        ElMessage.error(error.response?.data?.message || "添加失败");
        console.error("添加店铺失败:", error);
      }
    },
    openEditCanteenDialog(canteen) {
      this.selectedCanteen = { ...canteen };
      this.editCanteenDialogVisible = true;
    },
    async saveCanteenInfo() {
      try {
        await updateCanteen(
            this.selectedCanteen.id,
            this.selectedCanteen.name,
            this.selectedCanteen.position
        );
        ElMessage.success("修改成功");
        await this.fetchCanteenList();
        this.editCanteenDialogVisible = false;
      } catch (error) {
        ElMessage.error(error.response?.data?.message || "修改失败");
      }
    },
    async deleteCanteen(canteenId) {
      try {
        await ElMessageBox.confirm('确认删除该餐厅吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        await deleteCanteen(canteenId);
        ElMessage.success("删除成功");
        await this.fetchCanteenList();
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error("删除失败");
        }
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    },

    // 座位相关方法
    async showTables(canteenId, canteenName) {
      this.currentCanteenId = canteenId;
      this.currentCanteenName = canteenName;
      this.tablesDialogVisible = true;
      await this.fetchTables();
    },
    async fetchTables() {
      try {
        const response = await GetCanteenTable(this.currentCanteenId);
        if (response.data.code === 200) {
          this.tables = response.data.data;
        } else {
          console.error("获取餐桌数据失败:", response.data.errorMsg);
          ElMessage.error("获取餐桌数据失败");
        }
      } catch (error) {
        console.error("获取餐桌数据失败:", error);
        ElMessage.error("获取餐桌数据失败");
      }
    },
    openAddTableModal() {
      this.addTableForm = { number: null, capacity: null, price: null };
      this.addTableModalVisible = true;
    },
    async handleAddTable() {
      try {
        const response = await AddSeat(
            this.currentCanteenId,
            this.addTableForm.number,
            this.addTableForm.capacity,
            this.addTableForm.price
        );
        if (response.data.code === 200) {
          ElMessage.success("添加成功");
          this.addTableModalVisible = false;
          await this.fetchTables();
        } else {
          ElMessage.error("添加失败：" + response.data.errorMsg);
        }
      } catch (error) {
        console.error("添加失败:", error);
        ElMessage.error("添加失败");
      }
    },
    openEditTableModal(table) {
      this.editTableForm = { ...table };
      this.editTableModalVisible = true;
    },
    async saveTableEdit() {
      try {
        const response = await UpdateSeat(
            this.editTableForm.id,
            this.editTableForm.capacity,
            this.editTableForm.price,
            this.editTableForm.number,
            this.editTableForm.status
        );
        if (response.data.code === 200) {
          ElMessage.success("修改成功");
          this.editTableModalVisible = false;
          await this.fetchTables();
        } else {
          ElMessage.error("修改失败：" + response.data.errorMsg);
        }
      } catch (error) {
        console.error("修改失败:", error);
        ElMessage.error("修改失败");
      }
    },
    async deleteTable(seatId) {
      try {
        await ElMessageBox.confirm('确认删除该餐桌吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        const response = await DeleteSeat(seatId);
        if (response.data.code === 200) {
          ElMessage.success("删除成功");
          await this.fetchTables();
        } else {
          ElMessage.error("删除失败：" + response.data.errorMsg);
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error("删除失败:", error);
          ElMessage.error("删除失败");
        }
      }
    },

    // 菜品相关方法
    async showDishes(canteenId, canteenName) {
      this.currentCanteenId = canteenId;
      this.currentCanteenName = canteenName;
      this.dishesDialogVisible = true;
      await this.fetchDishes();
    },
    async fetchDishes() {
      try {
        const response = await GetDishes(this.currentCanteenId);
        if (response.data.code === 200) {
          this.dishes = response.data.data.dishes;
        } else {
          console.error("获取菜品数据失败:", response.data.errorMsg);
          ElMessage.error("获取菜品数据失败");
        }
      } catch (error) {
        console.error("获取菜品数据失败:", error);
        ElMessage.error("获取菜品数据失败");
      }
    },
    async fetchDishTypes() {
      try {
        const response = await GetDishType();
        if (response.data.code === 200) {
          this.dishTypes = response.data.data;
        } else {
          console.error("获取菜品类型失败:", response.data.message);
        }
      } catch (error) {
        console.error("获取菜品类型失败:", error);
      }
    },
    openAddDishModal() {
      this.addDishForm = { name: '', price: null, description: '', typeId: null, image: '' };
      this.addDishImagePreview = '';
      this.addDishModalVisible = true;
    },
    handleAddDishImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.addDishImageFile = file;
        this.addDishImagePreview = URL.createObjectURL(file);
      }
    },
    async handleAddDish() {
      try {
        const formData = new FormData();
        formData.append('canteenId', this.currentCanteenId);
        formData.append('name', this.addDishForm.name);
        formData.append('price', this.addDishForm.price);
        formData.append('description', this.addDishForm.description);
        formData.append('type', this.addDishForm.typeId);
        if (this.addDishImageFile) {
          formData.append('image', this.addDishImageFile);
        }

        const response = await AddDish(formData);
        if (response.data.code === 200) {
          ElMessage.success("添加成功");
          this.addDishModalVisible = false;
          await this.fetchDishes();
        } else {
          ElMessage.error("添加失败：" + response.data.message);
        }
      } catch (error) {
        console.error("添加失败:", error);
        ElMessage.error("添加失败");
      }
    },
    openEditDishModal(dish) {
      this.editDishForm = { ...dish, typeId: dish.typeId };
      this.editDishImagePreview = require(`../assets/uploads/${dish.image}`);
      this.editDishModalVisible = true;
    },
    handleEditDishImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.editDishImageFile = file;
        this.editDishImagePreview = URL.createObjectURL(file);
      }
    },
    async handleEditDish() {
      try {
        const formData = new FormData();
        formData.append('id', this.editDishForm.id);
        formData.append('name', this.editDishForm.name);
        formData.append('price', this.editDishForm.price);
        formData.append('description', this.editDishForm.description);
        formData.append('type', this.editDishForm.typeId);
        if (this.editDishImageFile) {
          formData.append('image', this.editDishImageFile);
        }

        const response = await UpdateDish(formData);
        if (response.data.code === 200) {
          ElMessage.success("修改成功");
          this.editDishModalVisible = false;
          await this.fetchDishes();
        } else {
          ElMessage.error("修改失败：" + response.data.errorMsg);
        }
      } catch (error) {
        console.error("修改失败:", error);
        ElMessage.error("修改失败");
      }
    },
    openDeleteDishModal(dishId) {
      this.selectedDishId = dishId;
      this.deleteDishModalVisible = true;
    },
    async handleDeleteDish() {
      try {
        const response = await DeleteDish(this.selectedDishId);
        if (response.data.code === 200) {
          ElMessage.success("删除成功");
          this.deleteDishModalVisible = false;
          await this.fetchDishes();
        } else {
          ElMessage.error("删除失败：" + response.data.errorMsg);
        }
      } catch (error) {
        console.error("删除失败:", error);
        ElMessage.error("删除失败");
      }
    },

    // 评价相关方法
    async showReviews(canteenId, canteenName) {
      this.currentCanteenId = canteenId;
      this.currentCanteenName = canteenName;
      this.reviewsDialogVisible = true;
      await this.fetchReviews();
    },
    async fetchReviews() {
      try {
        const response = await GetReview(this.currentCanteenId);
        if (response.data.code === 200) {
          this.reviews = response.data.data.map(review => ({
            ...review,
            image: review.image
          }));
        } else {
          console.error("获取评价数据失败:", response.data.errorMsg);
          ElMessage.error("获取评价数据失败");
        }
      } catch (error) {
        console.error("获取评价数据失败:", error);
        ElMessage.error("获取评价数据失败");
      }
    },
    async deleteReview(reviewId) {
      try {
        await ElMessageBox.confirm('确认删除该评价吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        const response = await DeleteReview(reviewId);
        if (response.data.code === 200) {
          ElMessage.success("删除成功");
          await this.fetchReviews();
        } else {
          ElMessage.error("删除失败：" + response.data.errorMsg);
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error("删除失败:", error);
          ElMessage.error("删除失败");
        }
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleString();
    }
  }
};
</script>

<style scoped>
.admin-layout {
  height: 100vh;
}

.admin-main-content {
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
  margin-left: 200px; /* 等于侧边栏宽度 */
  background-color: #f5f7fa;
}

.admin-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.permission-denied {
  text-align: center;
  padding: 100px 0;
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
}

/* 座位信息样式 */
.tables-section {
  padding: 20px;
}

.table-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.table-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.table-info span {
  font-size: 16px;
  color: #333;
}

/* 菜品信息样式 */
.dishes-section {
  padding: 20px;
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.dish-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dish-image {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
}

.dish-info {
  text-align: center;
  margin-top: 10px;
}

.dish-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.dish-info p {
  font-size: 16px;
  color: #43678e;
  font-weight: bold;
}

.dish-actions {
  margin-top: 10px;
}

/* 评价信息样式 */
.reviews-section {
  padding: 20px;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: relative;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.review-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

.delete-button {
  font-size: 13px;
  border: none;
  cursor: pointer;
  margin: 0 10px;
  color: #f56c6c;
}

.delete-button:hover {
  color: #f78989;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .admin-container {
    padding: 15px;
  }

  .admin-main-content {
    margin-left: 0;
  }
}
</style>
